<template>
  <div>
    <v-header></v-header>
    <el-form :model="updateForm" class="forgetContainer" :rules="rules" ref="updateForm" status-icon
             @keyup.enter.native="submitForm('updateForm')">
      <el-form-item>
        <el-row>
          <el-col :span="12">
            <router-link to='updatePassword' style="text-decoration: none;">
              <div class="grid-content bg-purple"
                   style="text-align: center;font-size: 20px;color: #409EFF;border-bottom: 2px solid #409EFF;">
                修改密码
              </div>
            </router-link>
          </el-col>
          <el-col :span="12">
            <router-link to='login' style="text-decoration: none;color: #000000">
              <div class="grid-content bg-purple-light" style="text-align: center;font-size: 20px;">
                返回登录
              </div>
            </router-link>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item prop="email">
        <el-input v-model="updateForm.email" auto-complete="false" type="text" prefix-icon="el-icon-message"
                  placeholder="若您看到这段话，说明邮箱为null" class="inputContainer" ref="email" disabled></el-input>
      </el-form-item>
      <el-form-item prop="pass">
        <el-input v-model="updateForm.pass" auto-complete="false" type="password" prefix-icon="el-icon-lock"
                  placeholder="请输入密码" class="inputContainer"></el-input>
      </el-form-item>
      <el-form-item prop="checkPass">
        <el-input v-model="updateForm.checkPass" auto-complete="false" type="password" prefix-icon="el-icon-lock"
                  placeholder="请确认密码" class="inputContainer"></el-input>
      </el-form-item>

      <div style="margin-top: 10px;margin-bottom: 10px">
        <span style="font-size: 12px;color: #999999">注：请确认邮箱是否正确</span>
      </div>
      <el-form-item>
        <el-button type="primary" @click="submitForm('updateForm')" style="width: 100%" class="inputContainer">修改密码
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import header from '../layout/Header'
  import footer from '../layout/Footer'

  export default {
    components: {
      'v-header': header,
      'v-footer': footer
    },
    name: 'UpdatePassword',
    data () {
      let validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'))
        } else {
          if (value.length < 8 || value.length > 32) {
            callback(new Error('密码长度必须在8到32位之间'))
          } else if (this.updateForm.checkPass !== '') {
            this.$refs.updateForm.validateField('checkPass')
          }
          callback()
        }
      };
      let validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.updateForm.pass) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      };
      return {
        updateForm: {
          email: '',
          pass: '',
          checkPass: ''
        },
        token: '',
        ip: '',
        rules: {
          pass: [
            {
              validator: validatePass,
              trigger: 'blur'
            }
          ],
          checkPass: [
            {
              validator: validatePass2,
              trigger: 'blur'
            }
          ]
        }

      }
    },
    created() {
      document.title = '修改密码';
    },
    mounted () {
      this.token=this.$route.query.token;
      this.verifyToken(this.$route.query.token)
      this.updateForm.email = this.$route.query.email;
      this.getIP();
    },
    methods: {
      getIP () {
        this.ip = returnCitySN["cip"];
      },
      submitForm (formName) {
        this.ip = returnCitySN["cip"];
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.$axios({
              method: 'post',
              url: '/user/before/updatePassword',
              dataType: 'json',
              data: {
                email: this.updateForm.email,
                pass: this.updateForm.pass,
                token: this.token,
                ip: this.ip
              }
            }).then((res) => {
              if (res.data.msgCode === '200') {
                this.$message({
                  message: res.data.msg,
                  type: 'success'
                });
                this.$router.push('/login');
              } else {
                this.$message({
                  message: res.data.msg,
                  type: 'error'
                });
              }
              console.log(res.data);
            })
          } else {
            console.log('error submit!!');
            return false
          }
        })
      },
      verifyToken (token) {
        if (token == null || token.size === 0 || token === '' || token === 'undefined') {
          this.$confirm('非法访问，点击确定返回主页', '提示', {
            confirmButtonText: '确定',
            type: 'warning'
          }).then(() => {
            this.$router.push('/login')
          }).catch(() => {
            this.$router.push('/login')
          })
        }
      }
    }
  }
</script>

<style scoped>
  .forgetContainer {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 30px auto;
    width: 350px;
    padding: 15px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eeeeee;
    box-shadow: 0 0 25px #cac6c6;
  }

  .inputContainer {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
  }
</style>
